<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.dropdown{
				position: relative;
				display: inline-block;
			}
			
			.dropdown-content{
				display: none;
				position: absolute;
				background-color: #F9F9F9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.2);
				padding: 10px;
			}
			
			.dropdown:hover>.dropdown-content{
				display: block;
			}
			
			.p1{
				position: relative;
				display: inline-block;
			}
			
			.p2{
				padding: 15px;
				color: white;
				background-color: #4CAF50;
				font-size: 16px;
				cursor: pointer;
			}
			
			.p3{
				display: none;
				position: absolute;
				background-color: #F9F9F9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.2);
				padding: 10px;
			}
			
			.p3 a{
				width: 100%;
				padding: 10px 0;
				display: block;
				text-align: center;
				text-decoration: none;
				color: black;
			}
			
			.p3 a:hover{
				background-color: #f1f1f1;
			}
			
			.p1:hover>.p3{
				display: block;
			}
		</style>
	</head>
	<body>
		
		<!--基本下拉菜单-->
		<div class="dropdown">
			<span>鼠标移动都我这</span>
			<div class="dropdown-content">
				<p>菜鸟教程</p>
				<p>www.runoob.com</p>
			</div>
		</div>
		
		<!--下拉菜单-->
		<div class="p1">
			<button class="p2">下拉菜单</button>
			<div class="p3">
				<a href="javaScript:void(0);">百度1</a>
				<a href="javaScript:void(0);">百度2</a>
				<a href="javaScript:void(0);">百度3</a>
			</div>
		</div>
		
	</body>
</html>